<template>
  <ElButton v-bind="buttonsetting.state" v-on="buttonsetting.state.buttonEvents">
    <slot name="default" />
    <slot name="loading" />
    <slot name="icon" />
  </ElButton>
</template>

<script lang="ts" name="ElButton">
import { ElButton } from 'element-plus'
import type { BtnSettingsType } from './types/button'
import { reactive, h } from 'vue'

// 添加导出组件的语句
export default {
  components: {
    ElButton,
  },
  inheritAttrs: false, // 禁止属性和事件自动继承
  props: ['buttonsetting'],
  render() {
    return h(
      ElButton,
      {
        ...this.buttonsetting.state,
        on: this.buttonsetting.state.buttonEvents
      },
      {
        // 处理具名插槽
        default: this.$slots.default,
        loading: this.$slots.loading,
        icon: this.$slots.icon
      }
    )
  }
}

/**
 * 按钮组件
 *
 * @param {string} _size 按钮大小
 * @param {string} _type 按钮类型
 * @param {boolean} _plain 是否朴素
 * @param {boolean} _round 是否圆角
 * @param {boolean} _circle 是否圆形
 * @param {string} _color 按钮颜色
 * @param {string} _bgColor 按钮背景颜色
 * @param {boolean} _disabled 是否禁用
 * @param {string | Component} _tag 按钮标签
 * @param {Record<string, (event: Event) => void>} _buttonEvents 按钮事件
 */
export class ButtonSettings {
  state: BtnSettingsType

  constructor(settings?: BtnSettingsType) {
    this.state = reactive({
      size: settings?.size,
      type: settings?.type,
      link: settings?.link,
      plain: settings?.plain,
      round: settings?.round,
      circle: settings?.circle,
      color: settings?.color,
      bgColor: settings?.bgColor,
      disabled: settings?.disabled,
      tag: settings?.tag,
      buttonEvents: settings?.buttonEvents ?? {},
    })
  }

  /**
   * 获取按钮所有属性
   * @returns {Object} 按钮属性对象
   */
  getAttributes(): BtnSettingsType {
    return {
      size: this.state.size,
      type: this.state.type,
      link: this.state.link,
      plain: this.state.plain,
      round: this.state.round,
      circle: this.state.circle,
      color: this.state.color,
      bgColor: this.state.bgColor,
      disabled: this.state.disabled,
      tag: this.state.tag,
    }
  }
}
</script>
